<template>
  <el-date-picker
    v-model="currentDate"
    v-bind="$attrs"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd"
    :picker-options="pickerOptions"
  />
</template>

<script>
import { getCalendarApi } from '@/api/common/common.js'
export default {
  props: {
    calendarType: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      currentDate: undefined,
      //   year: undefined,
      //   month: undefined,
      monthData: [],
      pickerOptions: this.monthDataStyle()
    }
  },
  watch: {
    currentDate(newVal) {
      this.$emit('input', newVal)
    }
  },
  mounted() {
  },
  methods: {
    async getCalendarData() {
      if (this.calendarType) {
        var params = { calendar_type: this.calendarType }
        var resp = await getCalendarApi(params)
        if (resp.success) {
          this.monthData = resp.data
        } else {
          this.targaMessageBox(this, resp.msg)
        }
      }
    },
    monthDataStyle() {
      const self = this;
      //   if (self.currentDate) {
      //     const date = new Date(self.currentDate)
      //     this.year = date.getFullYear()
      //     this.month = date.getMonth() + 1
      //   } else {
      //     var now = new Date()
      //     this.year = now.getFullYear()
      //     this.month = now.getMonth() + 1
      //   }
      self.getCalendarData()
      return {
        cellClassName(time) {
          if (self.calendarType) {
            let day = time.getDate();
            if (day < 10) {
              day = '0' + day;
            }
            let month = time.getMonth() + 1
            if (month < 10) {
              month = '0' + month;
            }
            const year = time.getFullYear();
            const res = year + '-' + month + '-' + day;

            const result = self.monthData.find(item => item.date === res)
            if (result) {
              if (result.holiday === 'W') {
                return ''
              } else {
                return 'isHoliday'
              }
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="scss">
.isHoliday {
    div{
        span {
        background-color: rgb(255, 200, 200);
        }
    }
}
</style>
